<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="jquery-3.1.1.js"></script>
	<title></title>
	<style type="text/css">
	ul,li{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.content{
		width: 520px;
		height: 280px;
		margin: 0 auto;
		position: relative;
	}
	.content .pic li{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.content .pic li.zindex{
		z-index: 2;
	}
	.content .indicator{
		position: absolute;
		bottom: 5px;
		left: calc(50% - 75px);
		z-index: 3;
	}
	.content .indicator li{
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 50%;
		/*color: white;*/
		text-align: center;
		background-color: green;
		float: left;
		margin: 5px;
	}
	.content .indicator li.active{
		background-color: red;
		color: white;
		cursor: pointer;
	}
	</style>
</head>
<body>
<div class="content">
	<ul class="pic">
		<li class="zindex"><a href="#"><img src="images/01.jpg"/></a></li>
		<li><a href="#"><img src="images/02.jpg"/></a></li>
		<li><a href="#"><img src="images/03.jpg"/></a></li>
		<li><a href="#"><img src="images/04.jpg"/></a></li>
		<li><a href="#"><img src="images/05.jpg"/></a></li>
	</ul>
	<ul class="indicator">
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>
<script type="text/javascript">
$(function () {
	
	// 开始位置
	var index_start = 0
	// 结束位置
	var index_end = $('.content .pic li').length;
	
	// timer这个值至关重要，全局的变量，
	// 根据鼠标的移入移出手动播放或者自动播放
	var timer = setInterval(autoChange,1000);
	
	// 自动播放
	function autoChange () {
		index_start ++;
		if (index_start == index_end) {
			index_start = 0;
		}
		
		// console.log(index_start);
		$('.content .pic li').eq(index_start).addClass('zindex')
		.siblings().removeClass('zindex');
		$('.content .indicator li').eq(index_start).addClass('active')
		.siblings().removeClass('active');
	}
	
	
	// 手动播放
	$('.content .indicator li').hover(function () {
		// 鼠标进来，关闭定时器，自动播放就停止了
		clearInterval(timer);
				
		// 根据当前选中的索引值来切换图片
		$('.content .pic li').eq($(this).index()).addClass('zindex')
		.siblings().removeClass('zindex');
		$('.content .indicator li').eq($(this).index()).addClass('active')
		.siblings().removeClass('active');
		
	},function () {
		// 鼠标出去，开启定时器，开始自动播放，并记录当前开始的位置
		index_start = $(this).index();
		timer = setInterval(autoChange,1000);
	});
	
	
});
</script>
</body>
</html>
